<template>
	<div class="private-class-detail">
    <ul class="list-rec">
      <li v-for="(item, index) in tabArr" :key="index" @click="changeIndex(index)" :class="{'active': index == recIndex}">
        <p>{{item}}</p>
      </li>
    </ul>
    <div class="detail-wrap" v-if="recIndex===0">
      <div class="detail-title">
        课程签约信息
      </div>
      <div class='detail-item'>
        <h2>课程信息</h2>
        <p>课程名称<em>{{ ruleForm.courseId }}</em></p>
        <p>课程类型<em>{{ ruleForm.courseType === 1 ?'私教课' : '自由练' }}</em></p>
        <p v-if="ruleForm.courseType === 1 ">课程模式<em>{{ setCourseMode(ruleForm.courseMode) }}</em></p>
        <p v-if="ruleForm.courseType === 1 ">课程时长<em>{{ ruleForm.courseTimes }}分钟</em></p>
      </div>
      <div class='detail-item'>
        <h2>购买信息</h2>
        <p><span>销售模式：</span><em>{{ ruleForm.saleMode === 0 ?'按次' : '包时'  }}</em></p>
        <p><span>购买数量：</span><em>{{ ruleForm.buyCount }}{{ ruleForm.saleMode === 0 ?'节' : '天' }}</em></p>
        <p><span>支付金额：</span><em>{{ ruleForm.payMoney }}元</em></p>
        <p v-if="ruleForm.courseType === 1"><span>每日约课限制：</span><em>{{ ruleForm.maxAttendClassOneDay }}节</em></p>
        <p v-if="ruleForm.courseType === 1"><span>允许约课时间：</span><em>{{ ruleForm.allowAttendClassStartTime }} - {{ ruleForm.allowAttendClassEndTime }}</em></p>
        <p v-if="ruleForm.courseType === 0 && saleModeIndex === 0"><span>最大门禁容错时间：</span><em>{{ ruleForm.maxFaultTolerantTime }}</em></p>
        <p v-if="saleModeIndex === 0"><span>课程有效期：</span><em>{{ ruleForm.expirationType === 0 ? '购买后' : '首节课后' }} {{ ruleForm.expirationDays }} 天</em></p>
        <p v-if="saleModeIndex === 1"><span>课程有效期：</span><em>{{ ruleForm.expirationType === 0 ? '购买后' : '首节课后' }} 至包时结束</em></p>
        <p><span>成交教练：</span><em>{{  ruleForm.signCoachUserIdList }}</em></p>
        <p><span>授课教练：</span><em>{{ ruleForm.teachCoachUserIdList }}</em></p>
        <p><span>协议：</span><em>{{ ruleForm.protocolConfigId }}</em></p>
      </div>
      <div class='detail-item'>
        <h2>学员甲</h2>
        <p><span>手机号：</span><em>{{ ruleForm.memberUserIdList[0].phone }}</em></p>
        <p><span>姓名：</span><em>{{ ruleForm.memberUserIdList[0].userName }}</em></p>
        <p><span>性别：</span><em>{{ ruleForm.memberUserIdList[0].gender === 0 ? '女':'男' }}</em></p>
        <p><span>身份证号：</span><em>{{ ruleForm.memberUserIdList[0].idCard ? ruleForm.memberUserIdList[0].idCard : '' }}</em></p>
      </div>
      <div class='detail-item' v-if="ruleForm.courseMode === 2">
        <h2>学员乙</h2>
        <p><span>手机号：</span><em>{{ ruleForm.memberUserIdList[1].phone }}</em></p>
        <p><span>姓名：</span><em>{{ ruleForm.memberUserIdList[1].userName }}</em></p>
        <p><span>性别：</span><em>{{ ruleForm.memberUserIdList[1].gender === 0 ? '女':'男' }}</em></p>
        <p><span>身份证号：</span><em>{{ ruleForm.memberUserIdList[1].idCard ? ruleForm.memberUserIdList[0].idCard : '' }}</em></p>
      </div>
      <i class="picon-1"></i>
    </div>
    <div class="detail-wrap" v-else>
      <div class="detail-title">
        {{ ruleForm.protocolConfigId }}
      </div>
      <div class="detail-content" v-html="ruleForm.protocolContent">
      </div>
    </div>
	</div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import { signGet } from '@/api/manageApi'
	export default {
		data() {
			return {
        more: 'more',
        rateValue: 5,
        tabArr: [
          '课程签约信息',
          '协议'
        ],
        recIndex: 0,
        interval: 2000,
        duration: 500,
				scrollHeight: 200,
        scrollLeft: 0,
        protocolDetail: {},
        ruleForm: {
          courseId: '',
          courseType: '',
          courseMode: '',
          courseTimes: '',
          buyCount: '',
          payMoney: '',
          maxAttendClassOneDay: '',
          maxFaultTolerantTime: '',
          allowAttendClassStartTime: '',
          allowAttendClassEndTime: '',
          expirationType: '',
          expirationDays: '',
          signCoachUserIdList: [],
          teachCoachUserIdList: [],
          protocolConfigId: '',
          memberUserIdList: [
            {
              phone: '',
              userName: '',
              gender: 1,
              idCard: '',
              emergencyContact: '',
              emergencyContactPhone: ''
            },
            {
              phone: '',
              userName: '',
              gender: 1,
              idCard: '',
              emergencyContact: '',
              emergencyContactPhone: ''
            }
          ]
        }
			}
    },
    computed:{
			...mapGetters(['uniToken'])
		},
		onLoad (option) {
      this.getCourseDetail(option.id)
    },
		methods: {
      setCourseMode (val) {
        if (val === 1) {
          return '1对1'
        } else if(val === 2) {
          return '1对2'
        } else {
          return ''
        }
      },
      getCourseDetail (val) {
        var params = {
          id: val
        }
        signGet(params).then(res => {
          // console.log(res)
          if (res.code == 200) {
            var data = res.data
            this.$set(this.ruleForm, 'courseId', data.courseSnapshot.courseName)
            this.$set(this.ruleForm, 'courseType', data.courseSnapshot.courseType)
            this.$set(this.ruleForm, 'courseMode', data.courseSnapshot.courseMode)
            this.$set(this.ruleForm, 'courseTimes', data.courseSnapshot.courseTimes)
            this.$set(this.ruleForm, 'saleMode', data.saleMode)
            this.$set(this.ruleForm, 'buyCount', data.buyCount)
            this.$set(this.ruleForm, 'payMoney', (data.payMoney/100).toFixed(2))
            this.$set(this.ruleForm, 'maxAttendClassOneDay', data.maxAttendClassOneDay)
            this.$set(this.ruleForm, 'maxFaultTolerantTime', data.maxFaultTolerantTime)
            this.$set(this.ruleForm, 'allowAttendClassStartTime', data.allowAttendClassStartTime)
            this.$set(this.ruleForm, 'allowAttendClassEndTime', data.allowAttendClassEndTime)
            this.$set(this.ruleForm, 'expirationType', data.expirationType)
            this.$set(this.ruleForm, 'expirationDays', data.expirationDays)
            var signCoachUsers = []
            if (data.signCoachUsers) {
              data.signCoachUsers.forEach((item, index) => {
                signCoachUsers.push(item.userName)
              })
            }
            this.$set(this.ruleForm, 'signCoachUserIdList', signCoachUsers.join())
            var teachCoachUsers = []
            if (data.teachCoachUsers) {
              data.teachCoachUsers.forEach((item, index) => {
                teachCoachUsers.push(item.userName)
              })
            }
            this.$set(this.ruleForm, 'teachCoachUserIdList', teachCoachUsers.join())
            if(data.protocolConfigSnapshot){
              this.$set(this.ruleForm, 'protocolConfigId', data.protocolConfigSnapshot.protocolName)
              this.$set(this.ruleForm, 'protocolContent', data.protocolConfigSnapshot.protocolContent)
              this.isDisableProtocol = true
            }else{
              this.isDisableProtocol = false
              this.$set(this.ruleForm, 'protocolConfigId', '')
              this.$set(this.ruleForm, 'protocolContent', '')
            }
            // console.log(this.ruleForm.protocolContent)
            this.ruleForm.protocolContent = this.ruleForm.protocolContent.replace(/<img/gi,'<img style="max-width:100%;"')
            this.$set(this.ruleForm, 'memberUserIdList', data.userMembers)
            this.$set(this.ruleForm, 'remainCount', data.remainCount)
          }
        })
      },
      changeIndex (index) {
        this.recIndex = index
      }
		}
	}
</script>

<style lang="scss">
.private-class-detail{
  padding-top: 120rpx;
  .list-rec{
    width: 100%;
    height: 96rpx;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0rpx;
    z-index: 100;
    li{
      display: inline-block;
      width: 50%;
      text-align: center;
      line-height: 96rpx;
      position: relative;
    }
    li:first-child::after{
      content: '';
      width: 1rpx;
      height: 30rpx;
      background: #DCDCDC;
      position: absolute;
      right: 0;
      top: 33rpx;
    }
    .active{
      font-weight: bold;
      color: #FF5A20;
    }
    .active::after{
      content: '';
      width: 38rpx;
      height: 8rpx;
      background: #FF5A20;
      border-radius: 4rpx;
      position: absolute;
      // left: 50%;
      margin-left: -19rpx;
      bottom: 0;
    }
  }
  .detail-wrap{
    width: 702rpx;
    margin: 0 auto;
    position: relative;
    .detail-title{
      width: 100%;
      height: 108rpx;
      border-radius: 25rpx 25rpx 0rpx 0rpx;
      opacity: 0.9;
      line-height: 108rpx;
      text-align: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #1E1E1E;
      background: url('../static/private1.png') no-repeat 0 0;
      background-size: cover;
    }
    .detail-item{
      width: 100%;
      background: #FFFFFF;
      padding: 35rpx 28rpx;
      box-sizing: border-box;
      position: relative;
      border-bottom: 2px solid #F2F2F2;
      h2{
        font-weight: 500;
        font-size: 30rpx;
        color: #1E1E1E;
        margin-bottom: 30rpx;
      }
      p{
        font-size: 28rpx;
        color: #838383;
        line-height: 60rpx;
        display: flex;
        span{
          min-width: 140rpx;
        }
        em{
          margin-left: 49rpx;
          font-size: 28rpx;
          color: #1E1E1E;
        }
      }
    }
    .picon-1{
      width: 229rpx;
      height: 226rpx;
      background: url('../static/private2.png') no-repeat 0 0;
      background-size: cover;
      display: inline-block;
      position: absolute;
      right: 44rpx;
      top: 546rpx;
    }
    .detail-content{
      font-size: 26rpx;
      color: #1E1E1E;
      line-height: 44rpx;
      padding: 38rpx 29rpx;
      background: #fff;
      img{
        max-width: 100%;
      }
    }
  }
}
</style>
